<template>
  <el-form
    class="wf-collapse-form"
    label-width="120px"
    label-position="left"
    size="mini"
    :model="formData"
    :rules="rules"
    ref="form"
  >
    <el-collapse v-model="activeNames">
      <el-collapse-item :title="$t('基础配置')" name="1">
        <div style="padding: 0 16px">
          <el-form-item v-if="!disabled" :label="$t('模板编号')" prop="f_Code">
            <el-input v-model="formData.f_Code" :placeholder="$t('请输入')"></el-input>
          </el-form-item>
          <el-form-item v-if="!disabled" :label="$t('模板名称')" prop="f_Name">
            <el-input v-model="formData.f_Name" :placeholder="$t('请输入')"></el-input>
          </el-form-item>
          <el-form-item v-if="!disabled" :label="$t('模板图标')" prop="f_Icon">
            <l-input-icon onlyFirst v-model="formData.f_Icon"></l-input-icon>
          </el-form-item>
          <el-form-item v-if="!disabled" :label="$t('图标颜色')" prop="f_Color">
            <l-input-color
              v-model="formData.f_Color"
              :placeholder="$t('请输入')"
            ></l-input-color>
          </el-form-item>
          <el-form-item v-if="!disabled" :label="$t('模板分类')" prop="f_Category">
            <el-select v-model="formData.f_Category" :placeholder="$t('请选择')">
              <el-option
                v-for="item in lr_dataItem['FlowSort']"
                :key="item.f_ItemValue"
                :label="item.f_ItemName"
                :value="item.f_ItemValue"
              >
              </el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item v-if="!disabled && appConfig.isSecretLevel" :label="$t('最高密级')" prop="f_SecretLevel">
            <l-secret-level-select v-model="formData.f_SecretLevel" :placeholder="$t('请选择')" />
          </el-form-item>
          <el-form-item v-if="!disabled" :label="$t('归属单位')" prop="f_Company">
            <l-company-select v-model="formData.f_Company" :placeholder="$t('请选择')" />
          </el-form-item>

          <el-form-item v-if="!disabled" :label="$t('排序')" prop="f_SortCode">
            <el-input-number
              v-model="formData.f_SortCode"
              controls-position="right"
              :min="0"
            ></el-input-number>
          </el-form-item>
          <el-form-item v-if="!disabled" label="归属单位" prop="f_Company">
            <l-company-select v-model="formData.f_Company" placeholder="请选择" />
          </el-form-item>
          <!--<el-form-item label="任务命名规则" prop="titleRules">
            <el-input v-model="formData.titleRules" readonly="readonly"
                      placeholder="请输入任务命名规则">
                <el-button slot="append" icon="el-icon-setting" @click="handleTitleRulesClick"></el-button>
            </el-input>
        </el-form-item>-->
          <el-form-item v-if="!disabled" :label="$t('我的任务创建')" prop="f_Mark">
            <l-radio
              v-model="formData.f_Mark"
              :options="optionsNotOrOk"
            ></l-radio>
          </el-form-item>
          <el-form-item v-if="!disabled" :label="$t('移动端创建')" prop="f_IsInApp">
            <l-radio
              v-model="formData.f_IsInApp"
              :options="optionsNotOrOk"
            ></l-radio>
          </el-form-item>
          <el-form-item v-if="!disabled" prop="f_Description" label-width="0">
            <el-input
              type="textarea"
              rows="4"
              v-model="formData.f_Description"
              :placeholder="$t('请填写备注')"
            ></el-input>
          </el-form-item>
        </div>
      </el-collapse-item>
      <!--<el-collapse-item :title="$t('流程参数')" name="2">
        <l-edit-table
          :columns="columns"
          :dataSource="paramsList"
          :isAddBtn="!disabled"
          :isRemoveBtn="!disabled"
          @addRow="handleAddParam"
          @deleteRow="handleDeleteParam"
        >
          <template v-slot:label="scope">
            <el-input size="mini"  v-model="scope.row.label" :disabled="disabled" />
          </template>
          <template v-slot:type="scope">
            <l-select v-model="scope.row.type" :options="paramTypes"  :disabled="disabled" />
          </template>
        </l-edit-table>
      </el-collapse-item>-->
      <el-collapse-item :title="$t('关键字保存设置')" name="2">
        <div style="padding: 0 16px">
          <el-form-item :label="$t('数据库')" prop="keywordDb">
            <el-select v-model="formData.keywordDb" :placeholder="$t('请选择')">
              <el-option-group
                v-for="group in lr_dblinkTree"
                :key="group.id"
                :label="group.label"
              >
                <el-option
                  v-for="item in group.children"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                >
                </el-option>
              </el-option-group>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('数据表')" prop="keywordTable">
            <l-codetable-select
              @change="handleTableChange"
              :dbCode="formData.keywordDb"
              v-model="formData.keywordTable"
            ></l-codetable-select>
          </el-form-item>
          <el-form-item :label="$t('关联流程字段')" prop="keywordRField">
            <l-select
              :options="keywordColumns"
              valueKey="name"
              labelKey="coment"
              v-model="formData.keywordRField"
            >
            </l-select>
          </el-form-item>
          <el-form-item :label="$t('保存字段')" prop="keywordSField">
            <l-select
              multiple
              :options="keywordColumns"
              valueKey="name"
              labelKey="coment"
              v-model="formData.keywordSField"
            >
            </l-select>
          </el-form-item>
        </div>
      </el-collapse-item>
      <el-collapse-item :title="$t('撤销操作')" name="3">
        <div style="text-align: center; margin-bottom: 16px">
          <el-radio-group
            v-model="formData.undoType"
            size="mini"
            :disabled="disabled"
          >
            <el-radio-button label="1">{{ $t('执行SQL') }}</el-radio-button>
            <el-radio-button label="2">{{ $t('.NET方法') }}</el-radio-button>
            <el-radio-button label="3">{{ $t('第三方接口') }}</el-radio-button>
          </el-radio-group>
        </div>
        <div style="padding: 0 16px">
          <!--执行SQL-->
          <div v-if="formData.undoType == '1'">
            <el-form-item prop="undoDbCode" label-width="0">
              <el-select
                :disabled="disabled"
                v-model="formData.undoDbCode"
                :placeholder="$t('请选择执行SQL数据库')"
              >
                <el-option-group
                  v-for="group in lr_dblinkTree"
                  :key="group.id"
                  :label="group.label"
                >
                  <el-option
                    v-for="item in group.children"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id"
                  >
                  </el-option>
                </el-option-group>
              </el-select>
            </el-form-item>
            <el-form-item prop="undoDbSQL" label-width="0">
              <el-input
                :readonly="disabled"
                type="textarea"
                v-model="formData.undoDbSQL"
                rows="8"
                :placeholder="$t('请填写SQL语句，参数有 @processId流程进程主键 @userId用户Id @userAccount用户账号 @companyId用户公司 @departmentId用户部门')"
              ></el-input>
            </el-form-item>
          </div>
          <!--.NET方法-->
          <div v-else-if="formData.undoType == '2'">
            <el-form-item prop="undoIOCName" label-width="0">
              <el-input
                :readonly="disabled"
                v-model="formData.undoIOCName"
                :placeholder="$t('请填写.NET方法IOC别名')"
              ></el-input>
            </el-form-item>
          </div>
          <!--第三方接口-->
          <div v-else-if="formData.undoType == '3'">
            <el-form-item prop="undoUrl" label-width="0">
              <el-input
                :readonly="disabled"
                type="textarea"
                rows="4"
                v-model="formData.undoUrl"
                :placeholder="$t('请填写第三方接口地址url(POST),接收参数格式{processId:流程进程主键,userId:用户Id,userAccount:用户账号,companyId:用户公司,departmentId:用户部门}')"
              ></el-input>
            </el-form-item>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item :title="$t('作废操作')" name="4">
        <div style="text-align: center; margin-bottom: 16px">
          <el-radio-group
            v-model="formData.deleteType"
            size="mini"
            :disabled="disabled"
          >
            <el-radio-button label="1">{{ $t('执行SQL') }}</el-radio-button>
            <el-radio-button label="2">{{ $t('.NET方法') }}}</el-radio-button>
            <el-radio-button label="3">{{ $t('第三方接口') }}</el-radio-button>
          </el-radio-group>
        </div>
        <div style="padding: 0 16px">
          <!--执行SQL-->
          <div v-if="formData.deleteType == '1'">
            <el-form-item prop="deleteDbCode" label-width="0">
              <el-select
                v-model="formData.deleteDbCode"
                :placeholder="$t('请选择执行SQL数据库')"
                :disabled="disabled"
              >
                <el-option-group
                  v-for="group in lr_dblinkTree"
                  :key="group.id"
                  :label="group.label"
                >
                  <el-option
                    v-for="item in group.children"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id"
                  >
                  </el-option>
                </el-option-group>
              </el-select>
            </el-form-item>
            <el-form-item prop="deleteDbSQL" label-width="0">
              <el-input
                :readonly="disabled"
                type="textarea"
                v-model="formData.deleteDbSQL"
                rows="8"
                :placeholder="$t('请填写SQL语句，参数有 @processId流程进程主键 @userId用户Id @userAccount用户账号 @companyId用户公司 @departmentId用户部门')"
              ></el-input>
            </el-form-item>
          </div>
          <!--.NET方法-->
          <div v-else-if="formData.deleteType == '2'">
            <el-form-item prop="deleteIOCName" label-width="0">
              <el-input
                :readonly="disabled"
                v-model="formData.deleteIOCName"
                :placeholder="$t('请填写.NET方法IOC别名')"
              ></el-input>
            </el-form-item>
          </div>
          <!--第三方接口-->
          <div v-else-if="formData.deleteType == '3'">
            <el-form-item prop="deleteUrl" label-width="0">
              <el-input
                :readonly="disabled"
                type="textarea"
                rows="4"
                v-model="formData.deleteUrl"
                :placeholder="$t('请填写第三方接口地址url(POST),接收参数格式{processId:流程进程主键,userId:用户Id,userAccount:用户账号,companyId:用户公司,departmentId:用户部门}')"
              ></el-input>
            </el-form-item>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item :title="$t('删除草稿')" name="5">
        <div style="text-align: center; margin-bottom: 16px">
          <el-radio-group
            v-model="formData.deleteDraftType"
            size="mini"
            :disabled="disabled"
          >
            <el-radio-button label="1">{{ $t('执行SQL') }}</el-radio-button>
            <el-radio-button label="2">{{ $t('.NET方法') }}</el-radio-button>
            <el-radio-button label="3">{{ $t('第三方接口') }}</el-radio-button>
          </el-radio-group>
        </div>
        <div style="padding: 0 16px">
          <!--执行SQL-->
          <div v-if="formData.deleteDraftType == '1'">
            <el-form-item prop="deleteDbCode" label-width="0">
              <el-select
                v-model="formData.deleteDraftDbCode"
                :placeholder="$t('请选择执行SQL数据库')"
                :disabled="disabled"
              >
                <el-option-group
                  v-for="group in lr_dblinkTree"
                  :key="group.id"
                  :label="group.label"
                >
                  <el-option
                    v-for="item in group.children"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id"
                  >
                  </el-option>
                </el-option-group>
              </el-select>
            </el-form-item>
            <el-form-item prop="deleteDraftDbSQL" label-width="0">
              <el-input
                :readonly="disabled"
                type="textarea"
                v-model="formData.deleteDraftDbSQL"
                rows="8"
               :placeholder="$t('请填写SQL语句，参数有 @processId流程进程主键 @userId用户Id @userAccount用户账号 @companyId用户公司 @departmentId用户部门')"
              ></el-input>
            </el-form-item>
          </div>
          <!--.NET方法-->
          <div v-else-if="formData.deleteDraftType == '2'">
            <el-form-item prop="deleteDraftIOCName" label-width="0">
              <el-input
                :readonly="disabled"
                v-model="formData.deleteDraftIOCName"
                :placeholder="$t('请填写.NET方法IOC别名')"
              ></el-input>
            </el-form-item>
          </div>
          <!--第三方接口-->
          <div v-else-if="formData.deleteDraftType == '3'">
            <el-form-item prop="deleteDraftUrl" label-width="0">
              <el-input
                :readonly="disabled"
                type="textarea"
                rows="4"
                v-model="formData.deleteDraftUrl"
                :placeholder="$t('请填写第三方接口地址url(POST),接收参数格式{processId:流程进程主键,userId:用户Id,userAccount:用户账号,companyId:用户公司,departmentId:用户部门}')"
              ></el-input>
            </el-form-item>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>

    <l-dialog
      :title="$t('流程任务命名规则配置')"
      :visible.sync="titleRulesVisible"
      :height="480"
      width="600px"
    >
      <div class="l-rblock" style="padding: 8px">
        <el-alert
          :title="titleRules"
          type="info"
          :closable="false"
          v-if="!$validatenull(titleRules)"
        >
        </el-alert>
        <draggable
          :list="titleRulesList"
          :group="{ name: 'dic' }"
          ghost-class="set-item-ghost"
          handle=".l-drag-item"
        >
          <div
            v-for="(item, index) in titleRulesList"
            class="l-set-item"
            :key="index"
          >
            <i class="l-drag-item el-icon-rank"></i>
            <l-select
              style="width: 26%; margin-right: 1%"
              size="mini"
              v-model="item.F_FiledValueType"
              :placeholder="$t('字段值类型')"
              :options="vTypeOptions"
              @change="handleChangeVType(item)"
            >
            </l-select>
            <el-input
              :readonly="
                item.F_FiledValueType != 1 && item.F_FiledValueType != 10
              "
              style="width: 26%"
              size="mini"
              v-model="item.F_FiledValue"
              :placeholder="$t('字段值')"
            ></el-input>
            <el-button
              @click="handleRemoveConditions(index)"
              circle
              plain
              type="danger"
              size="mini"
              icon="el-icon-minus"
              class="l-delete-item"
              style="padding: 4px"
            ></el-button>
          </div>
        </draggable>
        <div style="padding-left: 22px">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-circle-plus-outline"
            @click="handleAddTitleRulesList"
            >{{$t('添加流程任务命名规则配置')}}</el-button
          >
        </div>
      </div>
    </l-dialog>
  </el-form>
</template>

<script>
export default {
  name: "shcemeinfo-config",
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      activeNames: ["1"],
      optionsNotOrOk: [
        { label: this.$t("允许"), value: 1 },
        { label: this.$t("不允许"), value: 2 },
      ],
      formData: {
        f_Code: "",
        f_Name: "",
        f_Category: "",
        f_SecretLevel: this.lr_secretLevel,
        f_Mark: 1,
        f_IsInApp: 2,
        f_Description: "",
        f_Company: "",
        f_SortCode: 1,

        titleRules: "",

        undoType: 1,
        undoDbCode: "",
        undoDbSQL: "",
        undoIOCName: "",
        undoUrl: "",

        deleteType: 1,
        deleteDbCode: "",
        deleteDbSQL: "",
        deleteIOCName: "",
        deleteUrl: "",

        deleteDraftType: 1,
        deleteDraftDbCode: "",
        deleteDraftDbSQL: "",
        deleteDraftIOCName: "",
        deleteDraftUrl: "",

        keywordDb: "",
        keywordTable: "",
        keywordRField: "",
        keywordSField: "",

        f_Icon: "learun-icon-star",
        f_Color: "#409EFF",
      },
      rules: {
        f_Code: [
          { required: true, message: this.$t("请输入模板编号") },
          {
            validator: this.lr_existDbFiled,
            keyValue: () => {
              return this.formData.f_Id;
            },
            tableName: "lr_wf_schemeinfo",
            keyName: "f_Id",
            trigger: "blur",
          },
        ],
        f_Name: [{ required: true, message: this.$t("请输入") }],
        f_Category: [{ required: true, message: this.$t("请选择") }],
        f_SecretLevel: [{ required: true, message: this.$t("请选择") }],
        f_Icon: [{ required: true, message: this.$t("请选择") }],
        f_Color: [{ required: true, message: this.$t("请选择") }],
      },
      titleRulesVisible: false,
      titleRules: "",
      titleRulesList: [],

      columns: [
        // 参数配置表格设置
        { label: "名称", prop: "label", minWidth: "160" },
        { label: "类型", prop: "type", width: "100" },
        { label: "值", prop: "value", minWidth: "160" },
      ],
      paramTypes: [
        { value: "1", label: this.$t("常量") },
        { value: "2", label: this.$t("变量") },
        { value: "3", label: this.$t("SQL") },
      ],
      paramValues: [
        { value: "1", label: this.$t("模版编号") },
        { value: "2", label: this.$t("模版名称") },
        { value: "3", label: this.$t("模版分类") },
        { value: "4", label: this.$t("模版备注") },
        { value: "5", label: this.$t("流程ID") },
      ],
      paramsList: [],

      // 关键字保存设置
      keywordColumns: [],
    };
  },
  computed: {},
  created() {
    this.lr_loadDblink();
  },
  methods: {
    handleTitleRulesClick() {
      this.titleRulesVisible = true;
    },
    handleAddTitleRulesList() {
      this.titleRulesList.push({ type: 1, value: "" });
    },
    handleRemoveConditions() {},

    handleAddParam() {
      this.paramsList.push({
        label: "",
        type: "",
        value: "",
      });
    },
    handleDeleteParam({ index }) {
      this.paramsList.splice(index, 1);
    },

    // 关键字保存设置
    handleTableChange(table) {
      this.keywordColumns = table.columns;
    },

    resetForm() {
      this.formData.f_Id = "";
      this.formData.f_SchemeId = "";
      this.$refs.form && this.$refs.form.resetFields();
    },
    // 校验表单
    validateForm() {
      return new Promise((resolve) => {
        this.$refs.form.validate((valid) => {
          resolve(valid);
        });
      });
    },
    setForm(data) {
      this.formData = data;
    },
    getForm() {
      return this.$deepClone(this.formData);
    },
  },
};
</script>
